{extend name="layout/base"}
{block name="content"}
<div class="panel_box row">
    <div class="panel col">
        <a href="javascript:;" data-url="page/open.html">
            <div class="panel_icon">
                <i class="layui-icon" data-icon="&#xe656;">&#xe656;</i>
            </div>
            <div class="panel_word newMessage">
                <span id="todayopen " class="dcount">{$data.member}</span>
                <cite class="">活动</cite>
            </div>
        </a>
    </div>
    <div class="panel col">
        <a href="{:url('course/lists')}" data-url="page/open.html">
            <div class="panel_icon" style="background-color:#FF5722;">
                <i class="layui-icon" data-icon="&#xe63c;">&#xe63c;</i>
            </div>
            <div class="panel_word userAll">
                <span class="weekopen wcount">{$data.member1}</span>
                <cite class="">课程</cite>
            </div>
        </a>
    </div>
    <div class="panel col">
        <a href="{:url('member/lists')}" data-url="page/user.html">
            <div class="panel_icon" style="background-color:#009688;">
                <i class="layui-icon" data-icon="&#xe6ed;">&#xe6ed;</i>
            </div>
            <div class="panel_word userAll">
                <span class="user ucount">{$data.member2}</span>
                <cite class="">会员</cite>
            </div>
        </a>
    </div>
</div>

<div id="Pie" style="width: 600px;height:400px;float: right"></div>
<div id="Bar" style="width: 600px;height:400px;float: left"></div>

<script src="/static/js/echarts.min.js"></script>

<script type="text/javascript">
    layui.use(['jquery'], function($){
        // 基于准备好的dom，初始化echarts实例
        var Pie = echarts.init(document.getElementById('Pie'));
        var Bar = echarts.init(document.getElementById('Bar'));

        //饼状图
        $.get("{:url('index/bar')}").done(function (data) {
            Pie.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.data.title
                },
                series: [
                    {
                        name: '服务量',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:data.data.data
                    }
                ]
            })
        });

        //柱状图
        $.get("{:url('index/pie')}").done(function (data) {
            Bar.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.data.title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '服务量',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.data.value
                    }
                ]
            })
        });
    });
</script>

{/block}